<template>
	<t-drawer placement="right" size="50%" header="通话详情" :visible="isshow" @close="closefn" :footer="true">
		<div class="bigbox">
			<div>
				<div class="audiobox">
					<div class="toptitle">
						<span style="font-size: 20px; color: black">暂无-18610014707</span>
						<span style="background-color: #8d88e1; color: #fff; font-size: 12px">A(意向较强)</span>
						<span style="background-color: #5092ee; color: #fff; font-size: 12px">待分类</span>
					</div>
					<div>通话ID：123456789 | 通话时长：00:00:00</div>
					<div>
						<Audio></Audio>
					</div>
				</div>
				<div>下方聊天框</div>
			</div>
			<div class="rightbox">
        <dk-tabs
            style="background-color: #fff"
            v-model="activeTab"
            placement="top"
            @change="handleTabChange"
          >
            <dk-tab-panel :value="1" label="通话信息">
              <p>开发中1...</p>
            </dk-tab-panel>

            <dk-tab-panel :value="2" label="客户信息">
              <p>开发中2...</p>
            </dk-tab-panel>

            <dk-tab-panel :value="4" label="联系历史">
              <p>开发中3...</p>
            </dk-tab-panel>
          </dk-tabs>
      </div>
		</div>
	</t-drawer>
</template>

<script setup>
import { ref, defineProps, reactive } from 'vue';
import Audio from '@/components/Audio/AudioIndex.vue';
import { MessagePlugin } from 'tdesign-vue-next'; //提示框
import { PlayIcon, PauseIcon } from 'tdesign-icons-vue-next';
import { getcreatetask, getexceltemplate, transitionUpload } from '@/api/callOutTasks/index.js';

const props = defineProps({
	// 默认选中的部门id
	isshow: {
		type: String,
		default: ''
	}
});
const emit = defineEmits(['close']);

// 选项卡默认选项
const activeTab = ref(1)

//取消
const closefn = () => {
	emit('close', false);
};
//提交
// const onSubmit = ({ validateResult, firstError }) => {
// 	console.log(formData);

// 	if (validateResult === true) {
// 		MessagePlugin.success('操作成功');
// 		// emit('close', false);
// 		console.log(formData);
// 		console.log(validateResult);
// 		visibleCenter.value = true;
// 	} else {
// 		console.log('Validate Errors: ', firstError, validateResult);
// 		MessagePlugin.warning(firstError);
// 	}
// };
</script>

<style lang="scss" scoped>
.bigbox {
	display: flex;
	justify-content: space-between;
	.audiobox {
		width: 500px;
		.toptitle {
			display: flex;
			span {
				margin-right: 8px;
				border-radius: 4px;
				padding: 0 8px;
			}
		}
	}
  .rightbox{
    width: 100%;
    padding: 0 30px;
  }
}
</style>